<!DOCTYPE html>
<html lang="en">

<head>
  <!-- head and css -->
  {% include 't_head.html' %}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.4/socket.io.js" integrity="sha512-aMGMvNYu8Ue4G+fHa359jcPb1u+ytAF+P2SCb+PxrjCdO3n3ZTxJ30zuH39rimUggmTwmh2u7wvQsDTHESnmfQ==" crossorigin="anonymous">
  </script>
</head>

<body>

<!-- Model View - start -->
<div class="modal fade" id="ModalZoomedView">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Zoomed Console Output</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <!-- Modal Header -->

      <!-- Modal body -->
      <div class="modal-body">

          <div class="col-sm-12">
            
            <textarea id=zoomed_console_output 
                      name=zoomed_console_output></textarea>
          </div>

      </div> 
      <!-- Modal body -->

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
      <!-- Modal footer -->

      </div>
    </div>
  </div>
<!-- Model View - end -->


  <div class="d-flex" id="wrapper">
    <!-- Sidebar -->
    {% include 't_sidebar.html' %}

    <!-- Page Content -->
    <div id="page-content-wrapper">

      <!-- Navbar -->
      {% include 't_navbar.html' %}

      <div class="container-fluid">

        <br>
        <h3>API Monitor 🗳</h3>
        <div class="border-top my-3"></div>
        <!-- Textarea for injecting the custom script -->
        <div class="row">

          <div class="col-sm-12">
            <h4>What do you want to monitor?</h4>
            <small class="form-text text-muted">
              <font color=red><b>NOTE:</b></font> You can easily add more monitors by simply editing the json file called <b>api_monitor.json</b>
            </small>
            <br>

            <!-- FORM start -->
            <form class="form-group 
            list-group-item 
            list-group-item-action 
            bg-light
            rounded" action="/api_monitor" method=POST>
            <br/>
            <div class="row">
              
              
              <div class="col-sm-4">
                {% for e in api_monitor %}
                {% if loop.index<=10 %}
                <div class="checkbox">
                  <label><input type="checkbox" name="api_selected" value="{{e["Category"]}}">  {{ loop.index }}. {{e["Category"]}} {% if e["Comment"] is defined  %} <font color=red>&#8594;</font> {{e["Comment"]}} {% endif %}</label>
                </div>
                {% endif %}
                {% endfor %}
              </div>

              <div class="col-sm-4">
                {% for e in api_monitor %}
                {% if loop.index>10 and loop.index<=20  %}
                <div class="checkbox">
                 <label><input type="checkbox" name="api_selected" value="{{e["Category"]}}">  {{ loop.index }}. {{e["Category"]}} {% if e["Comment"] is defined  %} <font color=red>&#8594;</font> {{e["Comment"]}} {% endif %}</label>
                </div>
                {% endif %}
                {% endfor %}
              </div>

              <div class="col-sm-4">
                {% for e in api_monitor %}
                {% if loop.index>20 and loop.index<=30  %}
                <div class="checkbox">
                 <label><input type="checkbox" name="api_selected" value="{{e["Category"]}}">  {{ loop.index }}. {{e["Category"]}} {% if e["Comment"] is defined  %} <font color=red>&#8594;</font> {{e["Comment"]}} {% endif %}</label>
                </div>
                {% endif %}
                {% endfor %}
              </div>
          
              </div> <!-- end row -->


              <br/>

            <center>
              <input type=submit 
                     value="Start APIs Monitor" 
                     class="btn btn-success">
              <small class="form-text text-muted">
              <font color=red><b>NOTE:</b></font> Some APIs Monitors (e.g. 18, 19, 25, 26) <b>may not work on some devices.</b> If the target app crashes, try to exclude them one by one.
              </small>
            </center>
          </form>
          <!-- Form end -->

          <div class="border-top my-3"></div>
          <center>
            <a role="button" 
               href="/reset_console_logs?redirect=api_monitor" 
               class="btn btn-danger">
               Reset Console Output
            </a>
            <button class="btn btn-secondary" id="save_output">
            Save Console Output
            </button>
          </center>

          <br>
          
          <h3>APIs Monitor Console Output
            <button 
              data-toggle="modal" 
              data-target="#ModalZoomedView" 
              data-console-id="api_monitor"
              class="btn btn-primary btn-sm">
              Zoom
            </button>
          </h3>

          <!-- APIs Monitor Console output - Start -->
          <div class="row">
              <div class="col-sm-12">
                  <textarea id=api_monitor_console 
                            name=api_monitor_console 
                            class="form-control">{{ api_monitor_console_output_str|safe }}</textarea>
                  <br>
              </div>
          </div>
          <!-- APIs Monitor Console output - end -->

      </div> <!-- /#container-fluid -->

    </div> <!-- /#page-content-wrapper -->

  </div> <!-- /#wrapper -->

  <!-- Javascript loading -->
  {% include 't_js_script.html' %}
  {% block scripts %}


  <script>
    var api_monitor_editor = CodeMirror.fromTextArea(api_monitor_console, {
        lineNumbers: true,
        mode: 'javascript',
        theme: 'dracula',
        readOnly: true
    });
    api_monitor_editor.setSize("100%",500);

    var zoomed_console_editor = CodeMirror.fromTextArea(zoomed_console_output, {
            lineNumbers: true,
            mode: 'javascript',
            theme: 'dracula'
        });
    zoomed_console_editor.setSize("100%",500);
  </script>

  <script>
    //Set cursors always at the bottom 
    api_monitor_editor.setCursor(api_monitor_editor.lineCount(), 0);

    //const socket = io.connect('//' + document.domain + ':' + location.port + '/console');
    const socket = io.connect()

    socket.on('api_monitor', function(msg) {
        if(msg.data.length) {
            api_monitor_editor.setValue(api_monitor_editor.getValue()+msg.data);
            api_monitor_editor.setCursor(api_monitor_editor.lineCount(), 0)
        }
    });
  </script> 

  <!-- Save Console Output -->
  <script>
    $(document).ready(function() {
      $('#save_output').click(function(){
          $.ajax({
          url: "/save_console_logs",
          type: "get",
          success: function(response) {
          if(response.includes("print_done"))
            alert("Console logs stored in:\n"+response.replace("print_done - ",""))
          else
            alert("Error while saving Console logs. \nError info: "+response)
          }
        });
      });
    });
  </script>
  <!-- Save Console Output -->
  
  <!-- Zoomed modal view script -->
  <script>
      $('#ModalZoomedView').on('shown.bs.modal', function (e) {
        var console=$(e.relatedTarget).data('console-id');
        var textToCopy=""
          if(console=="api_monitor") textToCopy=api_monitor_editor.getValue()
          zoomed_console_editor.setValue(textToCopy)
          zoomed_console_editor.focus()
          zoomed_console_editor.setCursor(0, 0)
          zoomed_console_editor.refresh()
      })
    </script>

  <!-- Set current Page as active in the NavBar -->
  <script>
    $(document).ready(function () {
      $(".nav li").removeClass("active");
      $('#api_monitor').addClass('active');
    });
    </script>
  <!-- Set current Page as active in the NavBar -->

  {% endblock %}

</body>

</html>